<template>
  <div class="wrapper">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div style="padding-bottom: 20px">
        <el-button type="primary" size="medium" @click="handleAdd" icon="el-icon-plus">
          新增菜单
        </el-button>
      </div>

      <el-table
        style="width: 100%"
        :data="tableData"
        border
        stripe
        row-key="menuId"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="title" label="显示标题" show-overflow-tooltip />
        <el-table-column prop="name" label="路由名称" align="center" show-overflow-tooltip />
        <el-table-column prop="type" label="类型" width="70px" align="center">
          <template slot-scope="{ row }">
            <el-tag v-if="row.type === '0'" type="warning" effect="dark">目录</el-tag>
            <el-tag v-if="row.type === '1'" type="success" effect="dark">菜单</el-tag>
            <el-tag v-if="row.type === '2'" type="info" effect="dark">按钮</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="path" label="访问路径" align="center" show-overflow-tooltip />
        <el-table-column prop="component" label="组件路径" show-overflow-tooltip />
        <el-table-column prop="permissionCode" label="权限字段" show-overflow-tooltip />
        <el-table-column label="图标" align="center" width="60px">
          <template slot-scope="{ row }">
            <i style="font-size: 26px" :class="row.icon"></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="orderNum"
          label="排序"
          align="center"
          show-overflow-tooltip
          width="60px"
        />
        <!-- <el-table-column prop="remark" label="菜单备注" /> -->
        <el-table-column label="操作" align="center" width="150px" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <el-button type="warning" size="mini" @click="handleEdit(row)">编辑</el-button>
            <el-button type="danger" size="mini" @click="handleRemove(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 新增/修改弹窗 -->
    <MenuDialog
      :show.sync="showDialog"
      :editRow="editRow"
      :treeData="treeData"
      @close="dialogClose"
      @reset="handleReset"
    />
  </div>
</template>

<script>
import { getMenuApi, getParentMenuApi, deleteMenuApi } from '@/api/menu'
import MenuDialog from './components/menuDialog'
export default {
  components: { MenuDialog },
  data() {
    return {
      tableData: [],
      showDialog: false,
      editRow: {},
      treeData: []
    }
  },
  mounted() {
    this.getMenuList()
    this.getParentMenuList()
  },
  methods: {
    handleAdd() {
      this.showDialog = true
    },
    dialogClose({ update }) {
      this.editRow = {}
      update && this.getMenuList()
    },
    async getMenuList() {
      let res = await getMenuApi()
      if (res.success) {
        this.tableData = res.data
      }
    },
    async getParentMenuList() {
      let res = await getParentMenuApi()
      if (res.success) {
        this.treeData = res.data
      }
    },
    handleEdit(row) {
      this.editRow = row
      this.showDialog = true
    },
    handleRemove(row) {
      this.$confirm('<span style="color: red;">此操作不可逆！确定删除？</span>', '操作提示', {
        dangerouslyUseHTMLString: true,
        closeOnClickModal: false,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let res = await deleteMenuApi({ menuId: row.menuId })
          if (res.success) {
            this.$message.success('删除成功！')
            this.getMenuList(this.params)
            return
          }
          this.$message.error('删除失败！')
        })
        .catch(() => {})
    },
    handleReset() {
      this.editRow = {}
    },
    dialogClose({ update }) {
      update && this.getMenuList()
      update && this.getParentMenuList()
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper {
  padding: 15px;
}
</style>
